<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-form :inline="true" :model="query" @keyup.enter.native="toQuery()">
        <!-- 搜索 -->
        <el-form-item label="用户id：">
          <el-input v-model="query.uid" placeholder="用户id" clearable style="width: 110px;" />
        </el-form-item>
        <el-form-item label="用户名：">
          <el-input v-model="query.name" placeholder="用户名" clearable />
        </el-form-item>
        <!--      <div class="block">-->
        <span class="demonstration">选择时间：</span>
        <el-date-picker
          v-model="chooseDate"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right"
          clearable
        />
        <el-form-item style="margin-left: 1%">
          <el-button type="primary" @click="toQuery()" v-has-permission="['ums:pay:list']">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="resetQuery()">刷新</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="info"
            icon="el-icon-download"
            size="small"
            @click="handleExport"
            v-has-permission="['ums:pay:export']"
          >导出
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            :disabled="multiple"
            @click="handleDelete"
            v-has-permission="['ums:pay:delete']"
          >批量删除
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表单组件-->
    <!--    <eForm ref="form" :is-add="isAdd"/>-->
    <!--表格渲染-->
    <el-table
      v-loading="loading"
      :data="data"
      size="small"
      border
      style="width: 100%;text-align-all: center"
      :header-cell-style="{background:'#EAE9E9FF'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50px" />
      <el-table-column prop="uid" label="用户id" width="80%" />
      <el-table-column prop="nickname" label="用户昵称" />
      <el-table-column prop="realName" label="真实姓名" />
      <el-table-column prop="tradeNo" label="流水号" />
      <el-table-column prop="phone" label="手机号码" />
      <el-table-column prop="price" label="支付金额" />
      <el-table-column prop="createTime" label="时间" />
      <el-table-column label="备注" width="500px">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}...</span>
          <el-button v-if="scope.row.tradeNo" type="text" @click="orderDetailHandler(scope.row.tradeNo)" v-has-permission="['oms:order:infoByOrderSn']">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
      <el-table-column
        label="管理"
        align="center"
        width="240px"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)" v-has-permission="['ums:pay:delete']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />

    <!--表单组件-->
    <eForm ref="orderDetailForm" />
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/crud'
import { del, exportRecord } from '@/api/ums/payRecord'
import { downloadFile, formatTimeTwo } from '@/utils/index'
import { orderInfoByOrderSn } from '@/api/oms/order'
import eForm from '@/views/oms/order/orderDetail'

export default {
  components: { eForm },
  mixins: [initData],
  data() {
    const shortcuts = {
      shortcuts: [{
        text: '最近一周',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }]
    }
    return {
      showVisible: false,
      delLoading: false,
      // 非多个禁用
      multiple: true,
      chooseDate: [],
      pickerOptions: shortcuts,
      selectionId: [],
      dataForm: {
        id: '',
        isDelete: '',
        createBy: '',
        updateBy: '',
        createTime: '',
        updateTime: '',
        remark: '',
        uid: '',
        nickname: '',
        phone: '',
        price: '',
        realName: '',
        tradeNo: ''
      }
    }
  },

  created() {
    this.$nextTick(() => {
      this.init()
    })
  },

  methods: {
    formatTimeTwo,
    checkPermission,
    beforeInit() {
      this.url = 'admin/api/pay_record/list'
      this.params = {
        uid: this.query.uid,
        name: this.query.name,
        startTime: this.chooseDate == null ? '' : this.chooseDate[0],
        endTime: this.chooseDate == null ? '' : this.chooseDate[1]
      }
      const query = this.query
      const type = query.type
      const value = query.value
      if (type && value) {
        this.params[type] = value
      }
      return true
    },

    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id ? [row.id] : this.ids
      this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return del(ids)
      }).then(() => {
        // this.$refs[id].doClose()
        this.toQuery()
        this.$message.success('操作成功')
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const dataForm = this.dataForm
      delete dataForm.pageNum
      delete dataForm.pageSize
      this.$confirm('是否确认导出所有数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return exportRecord(dataForm)
      }).then(response => {
        downloadFile(response.data, '支付记录数据', 'xls')
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.query = {}
      this.chooseDate = []
      this.toQuery()
    },
    orderDetailHandler(orderSn) {
      if (orderSn) {
        orderInfoByOrderSn({ 'orderSn': orderSn }).then(res => {
          const _this = this.$refs.orderDetailForm
          _this.dialog = true
          _this.orderDetail = res.data
        })
      } else {
        this.$message({
          message: '订单不存在',
          type: 'error'
        })
      }
    }
  }
}
</script>

<style scoped>
/deep/ .el-table th > .cell {
  text-align: center;
}

/deep/ .el-table .cell {
  text-align: center;
}
</style>
